/* 自定义 Element Plus 主题 */
/* 文档：https://element-plus.org/zh-CN/guide/theming.html */

// 1. 覆盖 SCSS 变量
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  // ---------- 颜色变量 ----------
  $colors:
    (
      "primary": (
        "base": #409eff,
        // 主色
      ),
      "success": (
        "base": #67c23a,
      ),
      "warning": (
        "base": #e6a23c,
      ),
      "danger": (
        "base": #f56c6c,
      ),
      "error": (
        "base": #f56c6c,
      ),
      "info": (
        "base": #909399,
      )
    ),

  // ---------- 尺寸变量 ----------
  $button-padding-vertical: ("large": 13px, "default": 10px, "small": 7px),
  $button-padding-horizontal: ("large": 22px, "default": 20px, "small": 15px),

  // ---------- 边框变量 ----------
  $border-radius: ("base": 4px, "small": 2px, "round": 20px, "circle": 100%),
  $border-color: (
    "": #dcdfe6,
    "light": #e4e7ed,
    "lighter": #ebeef5,
    "extra-light": #f2f6fc,
    "dark": #d4d7de,
    "darker": #cdd0d6
  ),

  // ---------- 字体变量 ----------
  $font-family:
    (
      "":
        "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif"
    ),
  $menu: (
    "bg-color": #000000,
    // 直接覆盖菜单变量
    "text-color": #409eff,
    // 菜单文字颜色
    "hover-bg-color": #f0f7ff // 悬停背景色
  )
);

// 2. 导入所有 Element Plus 样式
@use "element-plus/theme-chalk/src/index.scss" as *;

// 3. 自定义全局样式覆盖
// ----------------------------
/* 覆盖菜单悬停背景色 */
:root {
  --el-menu-hover-bg-color: #f0f7ff; /* 使用你需要的颜色值 */
  --el-menu-text-color: #409eff; /* 使用你需要的颜色值 */
  --el-menu-bg-color: #000; /* 使用你需要的颜色值 */

  --el-popover-bg-color: #000 !important;
  --el-bg-color-overlay: rgba(255, 255, 255, 0.95);
  --el-popover-padding: 0px !important;
  
  --el-border-color-light: #cfcfcf;
  --el-border-color-lighter: #bdbdbd;

  --el-menu-active-color: #409eff;
  --el-button-bg-color:#ccc;
  --el-fill-color-blank:#fff;
}


// 4. 暗黑模式适配
[data-theme="dark"],
.dark {
  // 覆盖暗黑模式下的变量
  --el-bg-color: #1a1a1a;
  --el-text-color-primary: #e5e7eb;
  --el-menu-bg-color: #000;
  --color: #fff;

  --el-bg-color-overlay: rgba(44, 44, 44, 0.95);

  --el-popover-bg-color: #363535;
  --el-popover-border-color: #000;
  --el-border-color-light: #2e2f31;
  --el-border-color-lighter: #2e2f31;

  --el-menu-active-color: #409eff;

  --el-button-bg-color:#ccc;

  --el-fill-color-blank:#000;
}
// 表格样式调整
.el-table {
  th {
    background-color: var(--el-popover-bg-color);
    font-weight: 600;
  }
  tr:hover{
    background-color:#000 !important;
  }
}

// 按钮样式扩展
.el-button {
  &--small {
    padding: 7px 15px;
  }
}

// 弹窗圆角调整
.el-dialog {
  border-radius: 8px !important;
}

// 表单标签样式
.el-form-item__label {
  font-weight: 500;
}

